[第十二周] 初探 fetch: 用 fetch 發送 get 與 post request

前言

fetch 再使用上，除了發送 request、向 server 拿資料以外，還有很多小細節以及背後的運作理論要學習。但是，如果一次全部塞進來，其實很難消化，所以想要先記錄 fetch 最基本的使用方法，等到再腦袋形成一個基本的架構後，再研讀細節、理論填滿架構的分支(應該是填不完啦...。總而言之，今天會先從最常用到的 GET 和 POST 開始。

用 fetch 來 GET

1. 丟我們要拿資料的目標網址進去 fetch() 函式。
2. fetch 會產生一個叫做 promise 的物件，並且向 server 發送 request。
3. server 傳回來的 reaponse 會傳回來放進 promise。
4. 要從 promise 裡面拿出東西必須用 then() 函式在裡面放一個 callback function 用來處理從 promise 裡面拿出來的資料。
   (promise 自己會將資料轉換成參數傳進 then() 函式裡面的 callback function 裡。)
5. 將裡面的資料從 body text 的型態用 json() 轉換為我們可讀取的 json 格式。
6. 完成拿到資料，並且 console.log 看看資料長甚麼樣子。

let url = "https://restcountries.eu/rest/v2/all";
let request = fetch(url);

request.then(function(response){
    let json = response.json();
    json.then(function(data){
    console.log(data)
    })
})

用 fetch 來 post

步驟與 GET 類似，但是要特別注意要先將要傳送的資料用 JSON.stringify() 轉換成 string，才能夠發送；datatype 的部分則根據自己資料的形式做調整。

let url ="https://example.com";
let data = {user: "charles"};

let request = 
fetch(url,{
method: "POST",
data: JSON.stringify(data),
headers: new Headers{
    Content-Type: "application/json"
}
})
request.then(response => response.json())
.then(data => console.log(data))